<template>
	<view class="details uni-padding-wrap">
		<view class="form form-a">
			<view class="form-group">
				<view class="form-item">
					<text class="form-item-header">点位名称：</text>
					<text class="form-item-body"> {{ name }} </text>
				</view>
				<view class="form-item">
					<text class="form-item-header">位置：</text>
					<text class="form-item-body">{{ address }}</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-group">
				<view class="list-item" v-for="(item, index) in list" :key="index">
					<view class="panel">
						<view class="panel-header">
							{{ item.dictNum }}.{{ item.name }} <text class="panel-header-right">{{item.status == '0' ? '正常' : '异常'}}</text>
						</view>
						<view class="panel-body form form-a" v-if="item.status == '1'">
							<view class="form-group">
								<view class="form-item form-item-ver">
									<view class="form-item-header">问题描述：</view>
									<view class="form-item-body" v-if="item.remark">
										<view class="form-control-static">{{ item.remark }}</view>
									</view>
								</view>
								<view class="form-item form-item-ver" >
									<view class="form-item-header">照片：</view>
									<view class="form-item-body" v-if="item.small_imgs.length > 0">
										<view class="pic-box" @tap="viewPic(item.big_imgs)">
											<image class="pic" mode="aspectFit" :src="item.small_imgs[0]"></image>
										</view>
									</view>
									
								</view>
								<view class="form-item form-item-ver" v-if="item.videos.length > 0">
									<view class="form-item-header">视频：</view>
									<view class="form-item-body">
										<view class="video-box">
											<video class="video" :src="item.videos[0]"></video>
										</view>
									</view>
								</view>
							</view>
							
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { querySzbmJsdHistory, insertSzbmJsdBusinessBefore} from '@/api/configure.js';
	import {deepClone,mergeUrls,getUserInfo,formatDateStr, previewImage} from '@/util/util.js';
	import configUrl from '@/util/url.js';
	export default {
		data() {
			return {
				jsdId: '',
				businessId: '',
				name: '',
				address: '',
				datas: [{
					dictNum: 1,
					name: '积水点周边雨污水管道、雨水篦子排水是否通畅',
					status: '0',
					content: '',
					small_imgs: [],
					big_imgs: [],
					videos: []
				}, {
					dictNum: 2,
					name: '积水点周边雨污水检查井内是否安装防坠网',
					status: '0',
					content: '',
					small_imgs: [],
					big_imgs: [],
					videos: []
				}, {
					dictNum: 3,
					name: '积水点周边路灯、信号灯是否存在漏电',
					status: '0',
					content: '',
					small_imgs: [],
					big_imgs: [],
					videos: []
				}, {
					dictNum: 4,
					name: '是否存在其他紧急事项',
					status: '0',
					content: '',
					small_imgs: [],
					big_imgs: [],
					videos: []
				}],
				list: []
			}
		},
		methods: {
			init() {
				this.getData();
			},
			getData() {
				let data = {
					jsdId: this.jsdId,
					businessId: this.businessId
				}

				querySzbmJsdHistory(data).then((res) => {
					if(!res.data.szbmJsdBusinessBefore){
						this.list = this.datas.slice(0);
						
						return ;
					}
					
					let targetDatas = res.data.szbmJsdBusinessBefore.szbmJsdBusinessBeforeProblemList.slice(0);
					
					let datas = this.datas.map((item) => {
						let targetItem = targetDatas.find( (it)=> {
							return item.dictNum == it.dictNum;
						})
						
						item.status = targetItem.status;
						item.remark = targetItem.remark;
						
						item.small_imgs = targetItem.szbmJsdBusinessBeforeProblemFileList.reduce((prev, cur)=> {
							if(cur.type == 'img' && cur.path.indexOf('/thumbnail/') !== -1){
								let url = configUrl.CASEIMAGE_URL + cur.path.substr(1);
								
								prev.push(url);
							}
							
							return prev;
						}, [])
						
						item.big_imgs = targetItem.szbmJsdBusinessBeforeProblemFileList.reduce((prev, cur)=> {
							if(cur.type == 'img' && cur.path.indexOf('/original/') !== -1){
								let url = configUrl.CASEIMAGE_URL + cur.path.substr(1);
								
								prev.push(url);
							}
							
							return prev;
						}, [])
						
						item.videos = targetItem.szbmJsdBusinessBeforeProblemFileList.reduce((prev, cur)=> {
							if(cur.type == 'video'){
								let url = configUrl.CASEIMAGE_URL + cur.path.substr(1);
								
								prev.push(url);
							}
							return prev;
						}, [])
						
						return item;
					})
					
					
					this.list = datas.slice(0);
				})
			},
			viewPic(urls) {
				previewImage({
					urls: urls
				})
			}
		},
		onLoad(option) {
			this.jsdId = option.jsdId;
			this.businessId = option.businessId;
			this.name = option.name;
			this.address = option.address;

			this.init();
		}
	}
</script>

<style lang="scss">
	.form {}

	.form-a {
		margin-top: 20rpx;
		color: #767676;

		.form-group {
			.form-item {
				padding: 6rpx 0rpx;
				margin-bottom: 8rpx;

				.form-item-header {
					font-size: 28rpx;
					line-height: 120%;
				}

				.form-item-body {
					box-sizing: border-box;
					font-size: 28rpx;
					line-height: 120%;
				}

				&.form-item-ver {
					flex-direction: column;

					.form-item-header {
						width: 100%;
						margin-bottom: 10rpx;
					}

					.form-item-body {
						width: 100%;
						.form-control-static{
							min-height: 100rpx;
							padding: 20rpx;
							border-radius: 10rpx;
							line-height: 120%;
							background-color: #ececec;
						}
					}
				}
			}

			.text-alert {
				color: #dd524d;
			}
		}
	}
	
	.list{
		color: #767676;
		.list-group{
			.list-item{
				padding: 6rpx 0rpx;
			}
		}
	}
	
	.panel{
		.panel-header{
			font-size: 28rpx;
			line-height: 120%;
			.panel-header-right{
				padding-left: 10rpx;
				color: #f29004;
			}
		}
	}
	
	.pic-box{
		height: 200rpx;
		.pic{
			width: 100%;
			height: 100%;
		}
	}
	.video-box{
		height: 200rpx;
		.video{
			width: 100%;
			height: 100%;
		}
	}
</style>
